<template>
    <div class="mv-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div 
                    class="swiper-slide"
                    v-for='item in mvList'
                    :key="item.id">
                    <img 
                        :style="{background:`url('${loadingUrl}') 50% 50% no-repeat`,'background-size': '100% 100%'}"
                        :src="item.img.replace('w.h','170.230')" alt=""
                    >
                    <div class="icon"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 轮播图模块
import "@/assets/animate/swiper/swiper.min.css";
import Swiper from "@/assets/animate/swiper/swiper.min.js";


export default {
    name:'mvBanner',
    props: {
        mvList: Array,
        firstIndex: Number,
    },
    data() {
        return {
            index: 0,
            loadingUrl: require('@/assets/img/loading2.gif'),
        }
    },
    methods: {
        //初始化swiper插件
        loadSwiper() {
            var _this = this;
            var mySwiper = new Swiper(".swiper-container", {
                slidesPerView : 4.2,
                centeredSlides : true,
                slideToClickedSlide: true,
                on:{
                    // 高亮改变时，向父组件发送下标
                    slideChange: function(){
                        _this.index = this.activeIndex;
                        _this.$emit('changeMovie',_this.index);
                    },
                },
            });
            this.index = this.firstIndex;
            mySwiper.slideTo(this.index,0,false);
        }
    },
    mounted() {
        this.loadSwiper();
    }
}
</script>

<style lang="scss">
.mv-banner {
    padding: 10px 0;
    height: 140px;
    overflow: hidden;
    background-image: radial-gradient(rgb(109, 109, 109), rgb(126, 126, 126), rgb(206, 206, 206));
}
.swiper-slide{
    width:100px;/*设为固定值*/
    width:auto;/*根据内容调整宽度*/
    // background-color: yellow;
    font-size: 12px;   
    display: flex;
    justify-content: center;
    img {
        width: 70px;
        height: 100px;
        transition: all .5s;
    }
}
.swiper-slide-active{
    // background:#ff6600;
    color:#fff;
    font-size: 20px; 
    position: relative;
    img {
        width: 100px;
        height: 136px;
        border: 3px solid white;
        box-sizing: border-box;
    }
}
</style>